<template>
    <div class="sendRedPacketBody wap">
      <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}">发红包</x-header>
      <div class="main">
        <div class="inputList display-flex flex-direction-column justify-content-flex-center align-items-center">
          <div class="inputBox display-flex align-items-center">
            <p class="inputLabel">参与客户:</p>
            <div class="inputR display-flex align-items-center">
              <input class="selectUserInput plRight" readonly type="text" v-model="selectCustomerStr" placeholder="请选择客户">
              <img src="../../../../assets/img/order/user.png" alt="" @click="showPopupFn">
            </div>
          </div>
          <div class="inputBox display-flex align-items-center">
            <p class="inputLabel">有效期:</p>
            <div class="inputR display-flex align-items-center">
              <div class="dateBox display-flex align-items-center">
                <datetime class="selectDate" placeholder="选择日期" v-model="starTime" format="YYYY-MM-DD HH:mm"
                          :start-date="nowDate" @on-change="change" :style="{color:(starTime==''?'#DDDDDD':'#000000')}"></datetime>
                <!--<img style="margin-left: 0.05rem" src="../../../../assets/img/order/date.png" alt="">-->
              </div>
              <span style="margin:0 .05rem">至</span>
              <div class="dateBox display-flex align-items-center">
                <datetime class="selectDate" placeholder="选择日期" v-model="endTime" format="YYYY-MM-DD HH:mm"
                          :start-date="endTimeDef" @on-change="change" :style="{color:(endTime==''?'#DDDDDD':'#000000')}"></datetime>
                <!--<img style="margin-left: 0.05rem" src="../../../../assets/img/order/date.png" alt="">-->
              </div>
            </div>
          </div>
          <div class="inputBox display-flex align-items-center">
            <p class="inputLabel">红包金额:</p>
            <div class="inputR display-flex align-items-center">
              <input class="rpInput plRight" v-model="redValue" @keydown="changeInput" type="number" placeholder="请输入红包金额">
              <span>元</span>
            </div>
          </div>
          <div class="inputBox display-flex align-items-center justify-content-flex-justify">
            <p class="inputLabel">满额使用:</p>
            <div class="useInputR display-flex align-items-center">
              <span>订单满</span>
              <input class="useInput plRight" v-model="orderAmount" @keydown="changeInput" type="number" placeholder="输入金额">
              <span>元使用</span>
            </div>
          </div>
        </div>
        <div>
          <x-button class="sendBtn" @click.native="sendFn">发放</x-button>
        </div>
      </div>
      <x-dialog v-model="showToast" class="customerDialog">
        <ul class="customerList">
          <scroller class="customerListScroller">
            <li v-for="(item,index) in customerArr" @click="choseCustomerType(item)"
                :key="index" class="customerItem display-flex align-items-center">
              <img :src="item.select?require('../../../../assets/img/order/checkbox1.png'):require('../../../../assets/img/order/checkbox2.png')" alt="">
              <span>{{item.name}}</span>
            </li>
          </scroller>
        </ul>
        <div class="selectCustomerBtn display-flex flex-direction-row justify-content-flex-center align-items-center" @click="sureSelectCustomer">
          <span>确定</span>
        </div>
      </x-dialog>
      <popup class="selectGoodsBox" v-model="showPopup" position="right" width="100%">
        <div class="selectGoodsHead display-flex flex-direction-row align-items-center">
          <img class="vux-close" @click="closePopupFn" src="../../../../assets/img/order/close.png" alt="">
          <span class="selectGoodsTitle">选择客户</span>
        </div>
        <button-tab class="customerTab" v-model="customerType">
          <button-tab-item @on-item-click="selectCustomerType(0)">客户群</button-tab-item>
          <button-tab-item @on-item-click="selectCustomerType(1)">客户列表</button-tab-item>
        </button-tab>
        <div class="hr"></div>
        <div class="customerContentBox">
          <ul v-show="customerType==0" class="customerListType1">
            <scroller class="customerListScroller">
              <li v-for="(item,index) in customerArr" @click="choseCustomerType(item)"
                  :key="index" class="customerItem display-flex align-items-center">
                <img :src="item.select?require('../../../../assets/img/order/checkbox1.png'):require('../../../../assets/img/order/checkbox2.png')" alt="">
                <span>{{item.name}}</span>
              </li>
            </scroller>
          </ul>
          <div v-show="customerType==1" class="customerListType2">
            <div class="searchBox display-flex flex-direction-row align-items-center">
              <input class="searchInput" type="text" v-model="searchKeyWord" :placeholder="searchIcon" @input="inputChange">
              <span class="searchBtn display-flex flex-direction-row align-items-center justify-content-flex-center" @click="searchGoods"><span>查询</span></span>
            </div>
            <ul class="searchResultBox">
              <scroller class="customerListScroller" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller" :noDataText="this.$noData(customerListArr)">
                <li v-for="(item,index) in customerListArr" @click="choseCustomerListType(item)"
                    :key="index" class="customerItem display-flex align-items-center">
                  <img :src="item.select?require('../../../../assets/img/order/checkbox1.png'):require('../../../../assets/img/order/checkbox2.png')" alt="">
                  <span class="customerItemName">{{item.name?item.name:item.phone}}</span>
                  <p>{{item.phone}}</p>
                </li>
              </scroller>
            </ul>
          </div>
          <p v-if="showBtn" class="sureBtn display-flex flex-direction-row align-items-center justify-content-flex-center" @click="sureSelect"><span>确认选中</span></p>
        </div>
      </popup>
    </div>
</template>

<script>
    import { Datetime, Popup, ButtonTab, ButtonTabItem } from 'vux'
    export default {
        name: "sendRedPacket",
        components:{
          Datetime,
          Popup,
          ButtonTab,
          ButtonTabItem
        },
        data(){
          return{
            starTime:'',
            endTime:'',
            endTimeDef:'',
            nowDate:'',
            searchIcon:'\ue630 请输入客户信息',
            showToast:false,
            customerArr:[],
            customerListArr:[],
            selectCustomerArr:[],
            selectCustomerNameArr:[],
            selectCustomerStr:'',
            orderAmount:'',
            redValue:'',
            showPopup:false,
            customerType:0,
            showBtn:true,
            docmHeight:document.documentElement.clientHeight, //初始屏幕高度
            pageNum:1,
            searchKeyWord:'',
            noData:false,
          }
        },
      created(){
          this.getNowDate();
          this.getCustomer();
          this.getCustomerList(this.searchKeyWord,0);
      },
      mounted(){
        if (this.$platform() == 1) {
          window.onresize=()=>{
            if(document.body.clientHeight<this.docmHeight){
              this.showBtn = false
              if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
                setTimeout(function () {
                  document.activeElement.scrollIntoViewIfNeeded();
                }, 100);
              }
            }else{
              this.showBtn = true
            }
          }
        }
      },
      methods:{
        change (value) {
          // console.log('change', value)
          // console.log('change1', this.starTime)
          // console.log('change2', this.endTime)
          // if(this.starTime>this.endTime){
          //   this.endTime = this.starTime;
          // }
          var beginStr =  this.starTime + '';
          this.endTimeDef = beginStr.split(' ')[0];
        },
        showPopupFn(){
          this.showPopup = true;
          // this.getGoodsList();
        },
        closePopupFn(){
          this.showPopup = false;
        },
        inputChange(){
          this.searchKeyWord = this.searchKeyWord.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\%&]/g, "");
        },
        searchGoods(){
          this.pageNum = 1;
          this.getCustomerList(this.searchKeyWord,0);
        },
        selectCustomerType(val){
          this.customerType = val;
          this.selectCustomerArr=[];
          this.selectCustomerNameArr=[];
          this.selectCustomerStr='';
          if(0==val){
            this.getCustomer();
          }else{
            this.pageNum = 1;
            this.getCustomerList(this.searchKeyWord,0);
          }
        },
        sureSelect(){
          this.selectCustomerStr = this.selectCustomerNameArr.join('，');
          this.showPopup = false;
          // console.log(this.selectCustomerArr)
          // console.log(this.selectCustomerStr)
        },
        changeInput(e) {
          //过滤特殊字符
          // e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
        },
        getCustomer(){   //获取客户群
          this.$ajax.get('common/seller/customer_category/list',res=>{
            if(res.code == '200'){
              for (let i = 0; i < res.data.length; i++){
                res.data[i].select = false
              }
              this.customerArr = res.data;
            }else{
              this.$vux.toast.text(res.msg, 'center');
            }
          })
        },
        getCustomerList(key='',scrollType){    //获取客户列表
          this.$ajax.get('customer/list',res=>{
            if(res.code == '200'){
              for (let i = 0; i < res.data.list.length; i++){
                res.data.list[i].select = false
              }
              if(0==scrollType){
                this.customerListArr = res.data.list
                this.$refs.my_scroller&&this.$refs.my_scroller.finishPullToRefresh();
              }else{
                if(res.data){
                  this.customerListArr = this.customerListArr.concat(res.data.list);
                }else {
                  this.noData = true;
                }
              }
              // console.log(this.customerListArr)
            }else{
              this.$vux.toast.text(res.msg, 'center');
            }
          },{searchKey:key,pageNo:this.pageNum,pageSize:10})
        },
        refresh(){
          this.pageNum = 1;
          this.getCustomerList(this.searchKeyWord,0);
        },
        infinite(done){
          if(!this.noData){
            this.pageNum++;
            this.getCustomerList(this.searchKeyWord,1);
            done(true)
          }else{
            this.$refs.my_scroller&&this.$refs.my_scroller.finishInfinite(true)
            done()
          }
        },
          selectCustomer(){
            this.showToast = true;
            // this.selectCustomerArr = [];
            // this.selectCustomerNameArr = [];
            // this.selectCustomerStr = '';
            // this.$ajax.get('common/seller/customer_category/list',res=>{
            //   if(res.code == '200'){
            //     for (let i = 0; i < res.data.length; i++){
            //       res.data[i].select = false
            //     }
            //     this.customerArr = res.data;
            //   }
            // })
          },
          choseCustomerType(item){
            item.select = !item.select;
            let typeIndex = this.selectCustomerArr.indexOf(item.id);
            let typeNameIndex = this.selectCustomerNameArr.indexOf(item.name);
            if(typeIndex >= 0){
              this.selectCustomerArr.splice(typeIndex,1);
              this.selectCustomerNameArr.splice(typeNameIndex,1);
            }else {
              this.selectCustomerArr.push(item.id)
              this.selectCustomerNameArr.push(item.name)
            }
          },
        choseCustomerListType(item){
          item.select = !item.select;
          let typeIndex = this.selectCustomerArr.indexOf(item.customerId);
          let typeNameIndex = this.selectCustomerNameArr.indexOf(item.contactNameForSeller);
          if(typeIndex >= 0){
            this.selectCustomerArr.splice(typeIndex,1);
            this.selectCustomerNameArr.splice(typeNameIndex,1);
          }else {
            this.selectCustomerArr.push(item.customerId);
            this.selectCustomerNameArr.push((item.contactNameForSeller?item.name:item.phone));
          }
        },
        sureSelectCustomer(){
          this.showToast=false;
          this.selectCustomerStr = this.selectCustomerNameArr.join('，');
        },
        resetData(){
          this.starTime='';
          this.endTime='';
          this.orderAmount='';
          this.redValue='';
          this.customerArr=[];
          this.selectCustomerArr=[];
          this.selectCustomerNameArr=[];
          this.selectCustomerStr='';
        },
        sendFn(){
          if(this.selectCustomerArr==''){
            this.$vux.toast.text('请选择参与客户！', 'center');
            return;
          }
          if(this.starTime==''){
            this.$vux.toast.text('请选择开始时间！', 'center');
            return;
          }
          if(this.endTime==''){
            this.$vux.toast.text('请选择结束时间！', 'center');
            return;
          }

          if(this.starTime>this.endTime){
            this.$vux.toast.text('开始时间不能大于结束时间！', 'center');
            return;
          }

          if(this.redValue==''){
            this.$vux.toast.text('请填写红包金额！', 'center');
            return;
          }
          if(this.redValue<=0){
            this.$vux.toast.text('金额必须大于0！', 'center');
            return;
          }
          if(this.orderAmount==''){
            this.$vux.toast.text('请填写满额金额！', 'center');
            return;
          }
          if(this.orderAmount<=0){
            this.$vux.toast.text('金额必须大于0！', 'center');
            return;
          }
          if(parseFloat(this.redValue)>parseFloat(this.orderAmount)){
            this.$vux.toast.text('满额金额必须大于红包金额！', 'center');
            return;
          }
          if(!/^\d{0,8}(\.\d{0,2})?$/g.test(this.redValue)){
            this.$vux.toast.text('整数部分最多8位，小数部分最多2位！', 'center');
            return;
          }
          if(!/^\d{0,8}(\.\d{0,2})?$/g.test(this.orderAmount)){
            this.$vux.toast.text('整数部分最多8位，小数部分最多2位！', 'center');
            return;
          }

            let params={
              beginTime:this.starTime,
              endTime:this.endTime,
              orderAmount:this.orderAmount,
              redValue:this.redValue,
              // distributorCategoryIds:this.selectCustomerArr
            }
            let urlLink;
            if(this.customerType==0){
              params.distributorCategoryIds = this.selectCustomerArr;
              urlLink = 'activity/red_packet/template/submit';
            }else{
              params.distributorIds = this.selectCustomerArr;
              urlLink = 'activity/red_packet/template/list/submit';
            }

            this.$ajax.post(urlLink,params,res=>{
              if(res.code=='200'){
                this.$vux.toast.text('发放成功', 'center');
                this.resetData()
                if(this.$fromApp(this)){
                  this.$callJava({code:1003,quick :true})
                }else{
                  this.$router.go(-1);
                }
              }else{
                this.$vux.toast.text(res.msg, 'center');
              }

            },1)
        },
        getNowDate(){
          var date = new Date();
          var seperator1 = "-";
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          var strDate = date.getDate();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
          }
          var monthFirstDay =  year + seperator1 + month + seperator1 + '01';
          var currentdate = year + seperator1 + month + seperator1 + strDate;
          this.nowDate = currentdate+'';
        }
      }
    }
</script>

<style lang="less" type="text/less" scoped>
  ul>li{
    list-style: none;
  }
  input{
    -webkit-appearance: none;
  }
.sendRedPacketBody{
  background-color: #ffffff;
  .inputList{
    margin-top: .5rem;
    .inputBox{
      width: 6.5rem;
      height: 1rem;
      border: 1px solid #EBEBEB;
      border-radius: 6px;
      margin: 0.13rem 0;
      .inputLabel{
        color: #222222;
        font-size: 15px;
        width: 1.6rem;
        padding-left: .4rem;
      }
      .inputR{
        width: 4.2rem;
        height: 1rem;
        input{
          border: none;
          outline: none;
          height: 1rem;
          font-size: 15px;
        }
        img{
          width: 0.4rem;
          height: 0.4rem;
        }
        .plRight::-webkit-input-placeholder{
          text-align: right;
          color: #DDDDDD;
        }
        .plRight::-ms-input-placeholder{
          text-align: right;
          color: #DDDDDD;
        }
      }
      .useInputR{
        width: 3.75rem;
        height: 1rem;
        input{
          border: none;
          outline: none;
          height: 1rem;
          font-size: 15px;
        }
        img{
          width: 0.4rem;
          height: 0.4rem;
        }
        .plRight::-webkit-input-placeholder{
          text-align: right;
          color: #DDDDDD;
        }
        .plRight::-ms-input-placeholder{
          text-align: right;
          color: #DDDDDD;
        }
      }
      .selectUserInput{
        width: 3.7rem;
        margin-right: 0.18rem;
        text-align: right;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
      }
      .rpInput{
        width: 3.75rem;
        margin-right: 0.18rem;
        text-align: right;
      }
      .useInput{
        width: 1.6rem;
        margin-right: 0.18rem;
        text-align: right;
      }
      .dateBox{
        width: 2.3rem;
        .selectDate{
          width: 1.75rem;
          font-size: 13px;
        }
        .vux-datetime {
          text-align: center;
          color:#DDDDDD;
        }
      }
    }
  }
  .sendBtn{
    width: 6.5rem;
    height: 0.95rem;
    background-color: #E9573F;
    color: #FFFFFF;
    font-weight: bold;
    margin-top: 1rem;
  }
  .customerDialog{
    .customerList{
      width: 80%;
      height: 4rem;
      margin-left: 10%;
      margin-top: .3rem;
      .customerListScroller{
        margin:.5rem .5rem 1rem;
        height: 4rem!important;
        .customerItem{
          width: 100%;
          height: .8rem;
          img{
            width: .36rem;
            height: .36rem;
            margin-right: .4rem;
            margin-left: .2rem;
          }
          span{
            color: #333333;
            font-size: 17px;
            width: 3.8rem;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            text-align: left;
          }
        }
      }
    }
    .selectCustomerBtn{
      width: 2.54rem;
      height: .84rem;
      color: #FFFFFF;
      font-size: 17px;
      text-align: center;
      border-radius: .42rem;
      background-color: #527DD9;
      margin: .2rem 0 .2rem 3rem;
    }
  }
  .selectGoodsBox{
    background-color: #FFFFFF;
    .selectGoodsHead{
      width: 100%;
      height: .88rem;
      line-height: .88rem;
      /*border-bottom: 1px solid #EDEDED;*/
      font-size: 18px;
      .vux-close{
        width: .3rem;
        height: .3rem;
        margin-left: .5rem;
        margin-right: .3rem;
      }
      .selectGoodsTitle{
        font-weight: bold;
        margin-left: 26%;
      }
    }
    .customerTab{
      width: 60%;
      margin-left: 20%;
    }
    .hr{
      width: 100%;
      height: 1px;
      background-color: #EBEBEB;
      margin-top: .2rem;
    }
    .customerContentBox{
      .customerListType1{
        width: 80%;
        height: 5rem;
        margin-left: 10%;
        margin-top: .3rem;
        .customerListScroller{
          margin:2rem .5rem 1rem;
          height: 8rem!important;
          .customerItem{
            width: 100%;
            height: .8rem;
            img{
              width: .36rem;
              height: .36rem;
              margin-right: .4rem;
              margin-left: .2rem;
            }
            span{
              color: #333333;
              font-size: 17px;
              width: 3.8rem;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              text-align: left;
            }
          }
        }
      }
      .customerListType2{
        .searchBox{
          width: 100%;
          height: .7rem;
          margin-top: .3rem;
          .searchInput{
            outline: none;
            width: 5.38rem;
            height: .68rem;
            border: 1px solid #C8CBD3;
            border-radius: 3px;
            margin-left: .3rem;
            margin-right: .1rem;
            text-indent: .3rem;
            font-size: 15px;
          }
          .searchInput::placeholder{
            color:#c6c6c6;
            font-size:15px;
            font-family: "iconfont" !important;
          }
          .searchInput::-moz-placeholder{
            color:#c6c6c6;
            font-size:15px;
            font-family: "iconfont" !important;
          }
          .searchInput::-webkit-input-placeholder{
            color:#c6c6c6;
            font-size:15px;
            font-family: "iconfont" !important;
          }
          .searchBtn{
            width: 1.38rem;
            height: .68rem;
            text-align: center;
            line-height: .68rem;
            color: #868999;
            background-color: #C8CBD3;
            border-radius: 3px;
            border: 1px solid #C8CBD3;
          }
        }
        .searchResultBox{
          width: 80%;
          height: 5rem;
          margin-left: 10%;
          margin-top: .6rem;
          .customerListScroller{
            margin:3rem .5rem 1rem;
            height: 7rem!important;
            .customerItem{
              width: 100%;
              height: .8rem;
              img{
                width: .36rem;
                height: .36rem;
                margin-right: .4rem;
                margin-left: .2rem;
              }
              .customerItemName{
                color: #333333;
                font-size: 17px;
                width: 3rem;
                margin-right: .3rem;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                text-align: left;
              }
            }
          }
        }
      }
      .sureBtn{
        width: 6.2rem;
        height: .84rem;
        line-height: .84rem;
        text-align: center;
        border-radius: .42rem;
        color: #FB6E52;
        font-size: 17px;
        border: 1px solid #FB6E52;
        position: fixed;
        left: 50%;
        bottom: .3rem;
        margin-left: -3.1rem;
      }
    }
  }
}
</style>
